<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta title="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="viewer.min.css">
    <link rel="stylesheet" href="postVideo.css">
    <script src="index.js"></script>
    <script src="v-viewer.min.js"></script>
    axios-->
    <!-- <script src="./axios.min.js"></script>
    <title>视频管理</title>  -->
   
<!-- </head>

<body> -->
    <!-- 直接遍历循环视频 -->
    <template>
        <div id="app">
            <!-- 视频内容 -->
            <h2>视频管理</h2>
            <div class="publish">
                <el-button type="primary" @click="publish">发布</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="视频" width="180" >
                    <template slot-scope="scope">
                            <video @click="player" class="" :src="scope.row.videoaddr" initial-time="0" autoplay="true" loop="false" direction="0">
                       </video>      
                    </template>
                </el-table-column>
                <el-table-column prop="videodate" label="创建日期" width="180">
                </el-table-column>
                <el-table-column prop="videotype" label="分类" width="180">
                </el-table-column>
                <el-table-column prop="videoname" label="标题" width="180">
                </el-table-column>
                <el-table-column prop="des" label="描述">
                </el-table-column>
            </el-table>
            <!-- <div class="video-content"> -->
            <!-- 每一列4个视频 -->
            <!-- <div class="video-box" v-for="(item, index) in videoList" :key="index" @click="player" :data="item">
                    <video class="" :src="item" initial-time="0" autoplay="true" loop="false" direction="0">
                    </video>
    
                </div> -->
            <!-- 点击视频由弹出对视频进行播放 -->
    <el-dialog :visible.sync="video" @close="closeVideo">
                    <div>
                        <video id="videoBox" :src="videoPlay" initial-time="0" autoplay="false" loop="false" 
                            direction="0" controls bindplay="" bindpause="pause" bindended="" bindtimeupdate=""
                            bindwaiting="" binderror="">
    
                        </video>
    
                    </div>
                </el-dialog>
            <!-- </div>  -->
    
        </div>
    </template>
    <style>
        #app {
            max-width: 1200px;
            margin: 0 auto;
        }

        .video-content {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .video-box {
            width: 25%;
            height: auto;
            box-sizing: border-box;
            padding: 10px;
        }

        .video-box video {
            width: 100%;
            height: 100%;
        }

        .el-dialog video {
            width: 100%;
            height: 100%;
        }

        h2 {
            text-align: center;
        }

        .publish {
            display: flex;
            justify-content: flex-end;
        }
        video{
            width: 100%;
            height: 100%;
        }
        th .cell{
            text-align: center;
        }
        .el-table__row td{
            margin: 0 auto;
            text-align: center;
        }
    </style>
    <script>
        // new Vue({
        //     el: "#app",
        export default{

        
            data() {
                return {
                    tableData: [{
                        date: '2016-05-02',
                        title: '视频监控安装',
                        classify:"视频监控",
                        des: '这个是一个视频监控视频',
                        video:"1.mp4"
                    }, {
                        date: '2016-05-04',
                        title: '视频教学',
                        classify:"视频监控",
                        des: '这个是一个视频监控视频',
                        video:"2.mp4"
                    }, {
                        date: '2016-05-01',
                        title: 'java从入门到入土',
                        classify:"java",
                        des: '我选择放弃治疗',
                        video:"3.mp4"
                    }, {
                        date: '2016-05-03',
                        title: 'c++从入门到放弃',
                        classify:"c++",
                        des: '我选择狗带',
                        video:"4.mp4"
                    }],
                    videoList: [
                        "1.mp4",
                        "2.mp4",
                        "3.mp4",
                        "4.mp4",
                        "5.mp4",
                        "6.mp4",
                        "7.mp4",

                    ],
                    video: false,
                    videoPlay: ""
                }

            },
            methods: {
                player(e) {
                    console.log(e);
                    this.video = true;
                    this.videoPlay = e.target.src;
                    this.playInner();
                },
                playInner() {
                    var video = document.getElementById("videoBox");
                    console.log(video)
                },
                closeVideo() {
                    var video = document.getElementById("videoBox")
                    video.pause();
                    console.log(video);
                },
                // 获取数据列表
                videoArr(){
                    var that=this;
                    var config = {
                    headers: {

                        // 'Content-Type': 'multipart/form-data'
                        'Content-Type': 'application/json'

                    }
                };
                    axios.post(
                        "http://192.168.0.107:8002/videos/findAll",
                        
                       
                    ).then((result) => {
                     console.log(result);   
                     that.tableData=result.data.data
                    }).catch((err) => {
                        
                    });

                }
            },
            mounted() {
                this.videoArr();
            },
            activated() {
                this.videoArr(); 
            },
        }
        
    </script>
<!-- </body>

</html> -->